<template>
  <div class="b-road">
    <div class="name">1213瓦斯鉴定巷1掘进工作面</div>
    <div class="info-item">日进尺：{{info.value.showValue}}</div>
    <div class="info-item">累计进尺：{{info.value.ljjc}}米</div>
    <div class="info-item">
      采掘关键环节：
      <span v-if="info.value.cdState === 0" class="success">{{info.value.cdStateName}}</span>
      <span v-else class="warning">{{info.value.cdStateName}}</span>
    </div>
    <div class="info-item">地测预报：
      <span class="success">无异常</span>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  info: {
    type: Object,
    reqiured: true
  }
})
</script>
<style scoped lang="scss">
.b-road {
  cursor: pointer;
  text-align: center;
  flex-direction: column;
  position: absolute;
  top: -60px;
  left: 0;
  border-radius: 4px;
  z-index: 2;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  background: var(--bg-color-page);
  box-shadow: 0 0 5px #000;
  opacity: 0.8;
  padding: 8px;
  font-size: 12px;

  .name{
    font-size: 14px;
    background: var(--bg-color-page);
  }
  
  .info-item{
    margin-top: 4px;
  }
}

.success {
  color: var(--el-color-success);
}

.error {
  color: var(--el-color-danger);
}

.warning {
  color: var(--el-color-warning);
}
</style>
